<template>
  <div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageArray"
        :page-size="pageOpt.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
    </el-pagination>
  </div>
</template>
<script>
// 逻辑往上走： 父组件负责处理逻辑数据
// 数据往下流： 子组件负责管理父组件处理完成之后的数据渲染
export default {
  props: {
    currentPage: {
      type: String,
    },
    pageOpt: {
      type: Object
    },
    pageArray: {
      type: Array
    },
    total: {
      type: Number
    }
  },
  methods: {
    handleSizeChange(size) {
      // 子父传参一般触发 父组件中定义的事件；
      this.$emit('handleSizeChange', size)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    }
  },
}
</script>